<template>
	<div class="list">
    <header v-show="isShow">
        <div class="return">
          <i class="iconfont icon-fanhui"></i>
        </div>
        <div class="search">
          <i class="iconfont icon-fangdajing"></i>
          <span>搜你喜欢的...</span>
        </div>
        <div class="home">
          <img src="/images/home.png" alt="">
        </div>

    </header>
		<section>
      <!-- 左边 -->
        <div class="list-left" ref="left">
          <ul class="l-item">
            <li 
            :class="{active:index == currentIndex}"
            v-for="(item, index) in leftData" 
            :key="index" @click="goScroll(index)"
            >{{item.name}}</li>
          </ul>
        </div>
        <!-- 右边 -->
        <div class="list-right" ref="right">
          <div>
            <ul class="shop-list" v-for="(item, index) in rightData" :key="index">
              <li v-for="(item1, index1) in item" :key="index1">
                <h2>{{item1.name}}</h2>
                <ul class="r-content">
                  <li v-for="(item2, index2) in item1.list" :key="index2">
                      <img :src="item2.imgUrl" alt="">
                      <span>{{item2.name}}</span>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
    </section>
    <Tabbar></Tabbar>
	</div>
</template>

<script>
import BetterScroll from 'better-scroll'
import Tabbar from '@/components/common/Tabbar.vue'
import http from '@/common/api/request.js'
export default {
  name: "List",
  data() {
    return {
      isShow: true,
      leftData: [], //左侧数据
      rightData: [], //右侧数据
      aBetterScroll: '',//右侧滑动
      allHeight: [], //右侧所有的高度值
      scrollY: '' //右侧滚动距离
    }
  },
  computed: {
    currentIndex() {
      return this.allHeight.findIndex((item, index) => {
        return this.scrollY >= item && this.scrollY < this.allHeight[index+1]
      })
    }
  },
  components: {
    Tabbar
  },
  async created() {
   let res =  await http.$axios({
      url: 'api/goods/list'
    })
    let leftArr = [];
    let rightArr = [];
    res.forEach(i => {
      leftArr.push({
        id: i.id,
        name: i.name
      })
      rightArr.push(i.data)
    });
    this.leftData = leftArr
    this.rightData = rightArr

    // 当dom更新完再加载
      this.$nextTick(() => {
        // 左侧滑动
        new BetterScroll(this.$refs.left, {click: true})
        // 右侧滑动
        this.aBetterScroll = new BetterScroll(this.$refs.right, {click: true, probeType:3, bounce: false})
        // 统计右侧所有板块高度值，并且放入数组中
        let height = 0
        this.allHeight.push(height)
        // 获取右侧每一块的高度
        let uls = this.$refs.right.getElementsByClassName('shop-list');
		    //把dom对象转换成功真正的数组
        Array.from(uls).forEach(v=>{
          height += v.clientHeight
          this.allHeight.push( height )
        })
        // 得到右侧滚动的值
        this.aBetterScroll.on('scroll', (pos) => {
          this.scrollY = Math.abs(pos.y)

          if(Math.abs(pos.y) >= 50) {
            this.isShow = false
          } else {
            this.isShow = true
          }

        })
    })
  },
  methods: {
    goScroll(index) {
        this.aBetterScroll.scrollTo(0, -this.allHeight[index], 300)
    }
  }
};
</script>

<style>
  .list {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #b0352f;
    height: .88rem;
  }
  header .return {
    padding: 0 .4rem;
    line-height: .88rem;
  }
  header .return i{
    font-size: .68rem;
    color: #FFF;
  }
  header .search {
    display: flex;
    align-content: center;
    padding: .1rem .26rem;
    background-color: #FFF;
    border-radius: 12px;
    flex: 1;
  }
  header .search i {
    font-size: 0.48rem;
    color: #666;
    padding-right: .12rem;
  }
  header .search span {
    color: #666;
    font-size: 0.37rem;
  }
  header .home {
    padding: 0 .2rem;
    line-height: .88rem;
  }
  header .home img {
    width: 0.6rem;
    height: 0.6rem;
  }

  section {
    flex: 1;
    overflow: hidden;
    display: flex;
  }
  section .list-left {
    width: 2.48rem;
    background-color: #FFF;
    overflow: hidden;
    border-right: 1px solid #CCC;
  }
  section .list-left .l-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  section .list-left .l-item li {
    width: 100%;
    box-sizing: border-box;
    padding: 0.08rem;
    margin: 0.54rem 0;
    /* line-height: 1rem; */
    text-align: center;
    font-size: 0.37rem;
  }
  /* 被选中就添加红色 */
  section .list-left .l-item .active {
    color: #b0352f;
    border-left: 3px solid #b0352f;
  }

  section .list-right {
    width: 100%;
    height: 100%;
  }
  section .list-right .shop-list {
    text-align: center;
  }
  section .list-right .shop-list h2 {
    font-size: .48rem;
    font-weight: 600;
    padding: .4rem 0 .2rem 0;
  }
  section .list-right .shop-list .r-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  section .list-right .shop-list .r-content li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 33.33%;
    padding: .2rem 0;
    /* margin: 10px; */
  }
  section .list-right .shop-list .r-content li img {
    width: 1.7rem;
    height: 1.7rem;
  }
    section .list-right .shop-list .r-content li span {
      font-size: 0.42rem;
    }
  ::v-deep.tabbar {
    border-top: 1px solid #CCC;
  }
</style>